{% extends 'layout.html' %}

{% block title %}{{docs.title}}{% endblock %}

{% block content %}


<div class="hbox hbox-auto-xs hbox-auto-sm">



    <div id="doc-left-sidebar" class="col w w-auto-xs bg-light inherit dk b-r">
        <div class="wrapper b-b bg">
            <button class="btn btn-sm btn-default pull-right visible-sm visible-xs"><i class="fa fa-bars"></i></button>
            <a class="btn btn-sm btn-success w-xs font-bold" href="/create">创建文档</a>
        </div>

        <div>
            <div class="wrapper-md b-b">
                <span id="nav-title" class="h4">Documents</span>
            </div>
            <div class="hidden-sm hidden-xs" id="nav-docs">
                <ul class="nav">

                </ul>
            </div>
        </div>

    </div>


    <!--index right-->
    <div id="doc-left-content" class="col">
        <!-- uiView:  -->
            <div>
                <!-- header -->
                <div class="wrapper bg-light lter b-b">
                    <div class="btn-group pull-right">
                        {% if docs.projectLink %}
                            <a href="{{docs.projectLink}}" target="_blank" class="btn btn-sm btn-bg btn-primary"><i class="fa fa-link"></i></a>
                        {%endif%}
                        <a href="/doc/{{docs._id.toString()}}" class="btn btn-sm btn-bg btn-info">{{docs.title}}</a>
                        <a href="/user/{{docs.name}}" class="btn btn-sm btn-bg btn-success">{{docs.name}}发布于{{docs.ctime}} - {{docs.viewByCount}} 次浏览</a>
                    </div>
                    <a class="btn btn-sm btn-default w-xxs m-r-sm" href="javascript:history.go(-1);"><i class="fa fa-long-arrow-left"></i></a>

                    <!--<div class="btn-group m-r-sm">-->
                    <!--<button class="btn btn-sm btn-default w-xxs w-auto-xs" tooltip="Archive"><i class="fa fa-archive"></i></button>-->
                    <!--<button class="btn btn-sm btn-default w-xxs w-auto-xs" tooltip="Report"><i class="fa fa-exclamation-circle"></i></button>-->
                    <!--<button class="btn btn-sm btn-default w-xxs w-auto-xs" tooltip="Delete"><i class="fa fa-trash-o"></i></button>-->
                    <!--</div>-->
                    {% if !docs.preview %}
                    <div class="btn-group">

                        <!--编辑-->

                        {% if docs.name == user.nickname || user.role > docs.role %}
                        <a href="/doc/{{docs.id}}/edit" class="btn btn-sm btn-default w-xxs w-auto-xs"><i class="fa fa-edit"></i></a>
                        {% endif %}

                        <!--删除-->
                        {% if docs.name == user.nickname || user.role > docs.role %}
                            <button id="post-del" data-id="{{docs.id}}" class="btn btn-sm btn-default w-xxs w-auto-xs"><i class="fa fa-trash-o"></i></button>
                        {% endif %}
                        <!--tags-->
                        <div class="btn-group dropdown">
                            <button class="btn btn-sm btn-default w-xxs w-auto-xs dropdown-toggle"><i
                                    class="fa fa-fw fa-tag"></i> <span class="caret"></span></button>
                            <ul class="dropdown-menu">

                                {% for tag in docs.tags %}
                                <li>
                                    <a href="" class="ng-binding">
                                        <i class="fa fa-fw fa-circle text-xs"></i>
                                        {{tag}}
                                    </a>
                                </li>
                                {% endfor %}

                            </ul>
                        </div>
                    </div>
                    {% endif %}
                </div>


                    <div id="doc-content" class="post-css clearfix padder-md">
                        {% autoescape %}{{docs.mdRender||docs.content}}{% endautoescape %}
                        <h2></h2>
                    </div>
                    {% if docs.iscomment %}
                    <div class="wrapper b-b b-t margin10-tb">
                        <i class="fa fa-comments-o"></i>
                        <span>评论与回复</span>- 1个回复
                    </div>

                    <div id="wrap-comments" class="wrapper">


                        {% for comment in comments %}
                        <div class="each-comments" id="{{comment.cid}}">
                            <a href="/user/{{comment.name}}" class="pull-left thumb-sm">
                                <img src="{{comment.author.avatar}}" class="img-circle">
                            </a>

                            <div class="m-l-xxl m-b">
                                <div>
                                    <a href=""><strong>{{comment.name}}</strong></a>

                                    {% if comment.name == user.nickname || user.role > comment.author.role %}
                                    <a id="delete-comment" class="btn-xs" href="javascript:;"><i class="fa fa-trash-o"></i></a>
                                    {% endif %}

                                    {% if comment.name != user.nickname %}
                                    <a id="reply-comment" class="btn-xs pull-right" href="javascript:;"><i class="fa fa-reply"></i></a>
                                    {% endif %}


                                    {% if 2 == comment.author.role %}
                                    <label class="label bg-dark m-l-xs">Admin</label>
                                    {% endif %}

                                    {% if 3 == comment.author.role %}
                                    <label class="label bg-danger m-l-xs">SuperAdmin</label>
                                    {% endif %}


                                  <span class="text-muted text-xs block m-t-xs">
                                    {{comment.createtime}}
                                  </span>
                                </div>
                                <div class="m-t-sm reply-wrap">
                                    {% if comment.reply %}
                                    <a href="">@{{comment.reply}}</a>&nbsp;&nbsp;
                                    {% endif %}
                                    {% autoescape false %}
                                    {{comment.comment}}
                                    {% endautoescape %}
                                </div>

                                <!--reply-->
                                {% if comment.name != user.nickname %}
                                <div class="reply panel b-a hide">
                                    <div class="panel-heading b-b b-light" reply-name="{{comment.name}}">
                                        @{{comment.name}}
                                    </div>
                                    <textarea class="comment-content form-control" rows="1" placeholder="评论说点什么吧"></textarea>
                                    <div class="panel-footer bg-light lt">
                                        <button id="reply-btn" class="btn btn-success w-xs font-bold">发表回复</button>
                                        <div class="btn pull-right"><a href="" class="markSyn">支持Github风格的Markdown语法</a>
                                        </div>
                                    </div>
                                </div>
                                {% endif %}
                                <!--end reply-->
                            </div>
                        </div>
                        {% endfor %}

                        {% if !comments.length %}
                        <div class="text-center">暂无评论</div>
                        {% endif%}

                    </div>


                    <div class="wrapper">
                        <div class="panel b-a">
                            <div class="ng-hide">
                                <!--<div class="panel-heading b-b b-light ng-binding">-->
                                <!--james@gmail.com-->
                                <!--</div>-->
                                <!--<div id="comment-content" class="wrapper" contenteditable="true" style="min-height:100px"></div>-->
                                <textarea id="comment-content" class="form-control comment-content" rows="5"
                                          placeholder="评论说点什么吧"></textarea>

                                <div class="panel-footer bg-light lt">
                                    <button id="comment-btn" class="btn btn-success w-xs font-bold">发表回复</button>
                                    <div class="btn pull-right"><a href="" class="markSyn">支持Github风格的Markdown语法</a></div>
                                </div>
                            </div>
                        </div>
                    </div>

{% endif %}



</div>

</div>
</div>
{% endblock %}
{% block loadjs %}
<script>

    //hljs
    require(['jquery','lib/highlight.min'], function ($, hljs) {
        $('pre code').each(function(i, block) {
            hljs.highlightBlock(block);
        });
        $('.post-css').find('table').addClass('table table-bordered table-hover table-condensed bg-white-only');
    });
    {% if docs.iscomment %}
        //comments
        require(['comment/comment.min']);
    {% endif %}

    require(['docs/supervisor.min','postsdocs/del.min']);

</script>
{% endblock %}